<template>
    <div class="user-setup">
        <el-tabs type="border-card" class="demo-tabs" v-model="activeName">
            <el-tab-pane :name="1">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon><calendar /></el-icon>
                        <span>微信支付</span>
                    </span>
                </template>
                <el-form
                    :model="formData"
                    label-width="240px"
                >
                    <el-form-item label="状态" prop="pay_switch">
                        <el-radio-group v-model="formData.mch_switch">
                            <el-radio :label="1">开启</el-radio>
                            <el-radio :label="0">关闭</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <ElFormItem label="支付名称" prop="mch_name">
                        <div class="w-80">
                            <ElInput
                                v-model="formData.mch_name"
                                clearable
                                placeholder="请输入支付名称"
                            />
                        </div>
                    </ElFormItem>
                    <ElFormItem label="appid" prop="app_id">
                        <div class="w-80">
                            <ElInput
                                v-model="formData.app_id"
                                clearable
                                placeholder="请输入appid"
                            />
                        </div>
                    </ElFormItem>
                    <ElFormItem label="支付商户号 (Mch_Id)" prop="mch_id">
                        <div class="w-80">
                            <ElInput
                                v-model="formData.mch_id"
                                clearable
                                placeholder="请输入支付商户号 (Mch_Id)"
                            />
                        </div>
                    </ElFormItem>
                    <ElFormItem label="V3支付密钥 (APIKEY)" prop="wx_apikey">
                        <div class="w-80">
                            <ElInput
                                v-model="formData.wx_apikey"
                                clearable
                                placeholder="请输入V3支付密钥 (APIKEY)"
                                maxlength="32"   show-word-limit
                            />
                        </div>
                    </ElFormItem>


                    <ElFormItem label="CERT文件证书" prop="apiclient_cert">
                        <el-upload ref="uploadRef" class="upload-demo" :action="uploadAction" :headers="uploadToken"
                                    :on-success="successHandle1" :limit="1" :before-upload="handleBefore">
                                    <el-input class="w-[280px]" :placeholder="formData.apiclient_cert" clearable readonly>
                                        <template #append>
                                            <el-button>上传</el-button>
                                        </template>
                                    </el-input>
                                </el-upload>
                        <span>下载证书cert.zip中的 apiclient_cert.pem文件</span>
                    </ElFormItem>
                    <ElFormItem label="KEY文件证书" prop="apiclient_key">
                        <el-upload ref="uploadRef" class="upload-demo" :action="uploadAction" :headers="uploadToken"
                                    :on-success="successHandle2" :limit="1" :before-upload="handleBefore">
                                    <el-input class="w-[280px]" :placeholder="formData.apiclient_key" clearable readonly>
                                        <template #append>
                                            <el-button>上传</el-button>
                                        </template>
                                    </el-input>
                                </el-upload>
                        <span>下载证书cert.zip中的 apiclient_key.pem文件</span>
                    </ElFormItem>
                </el-form>
            </el-tab-pane>
            <el-tab-pane :name="2" label="支付宝支付">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon><calendar /></el-icon>
                        <span>支付宝支付</span>
                    </span>
                </template>
                <el-alert type="warning"  :closable="false" show-icon>
                    <template #title>
                        温馨提示：支付宝需要开通当面付权限
                    </template>
                </el-alert>
                <el-form
                    :model="formData"
                    label-width="240px"
                >
                    <el-form-item label="状态" prop="pay_switch">
                        <el-radio-group v-model="formData.ali_switch">
                            <el-radio :label="1">开启</el-radio>
                            <el-radio :label="0">关闭</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <ElFormItem label="应用appid" prop="mch_id">
                        <div class="w-80">
                            <ElInput
                                v-model="formData.ali_appid"
                                clearable
                                placeholder="请输入应用appid"
                            />
                        </div>
                    </ElFormItem>
                    <ElFormItem label="应用私钥" prop="mch_id">
                        <div class="w-80">
                            <el-input class="w-[500px]" placeholder="请输入应用私钥" v-model="formData.ali_privatekey" type="textarea"
                                :rows="5">
                            </el-input>
                        </div>
                    </ElFormItem>
                    <ElFormItem label="应用公钥" prop="ali_pubkeycert">
                        <el-upload ref="uploadRef" class="upload-demo" :action="uploadAction" :headers="uploadToken"
                                    :on-success="successHandle5" :limit="1" :before-upload="zfbhandleBefore">
                                    <el-input class="w-[280px]" :placeholder="formData.ali_pubkeycert" clearable readonly>
                                        <template #append>
                                            <el-button>上传</el-button>
                                        </template>
                                    </el-input>
                                </el-upload>
                        <span>下载证书应用公钥.crt</span>
                    </ElFormItem>
                    <ElFormItem label="支付宝公钥证书" prop="ali_public_key">
                        <el-upload ref="uploadRef" class="upload-demo" :action="uploadAction" :headers="uploadToken"
                                    :on-success="successHandle3" :limit="1" :before-upload="zfbhandleBefore">
                                    <el-input class="w-[280px]" :placeholder="formData.ali_public_key" clearable readonly>
                                        <template #append>
                                            <el-button>上传</el-button>
                                        </template>
                                    </el-input>
                                </el-upload>
                        <span>下载证书支付宝公钥证书.crt</span>
                    </ElFormItem>
                    <ElFormItem label="支付宝根证书" prop="alirootcert">
                        <el-upload ref="uploadRef" class="upload-demo" :action="uploadAction" :headers="uploadToken"
                                    :on-success="successHandle4" :limit="1" :before-upload="zfbhandleBefore">
                                    <el-input class="w-[280px]" :placeholder="formData.alirootcert" clearable readonly>
                                        <template #append>
                                            <el-button>上传</el-button>
                                        </template>
                                    </el-input>
                                </el-upload>
                        <span>下载证书支付宝根证书.crt</span>
                    </ElFormItem>
                    <el-form-item label="IP白名单:">
                        <div class="w-80">
                            <el-input class="w-[500px]" placeholder="请输入IP白名单" v-model="formData.ali_ip" disabled>
                            </el-input>
                        </div>
                        <el-button v-copy="formData.ali_ip" type="primary">复制</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane :name="3" label="添加客服">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon><calendar /></el-icon>
                        <span>添加客服</span>
                    </span>
                </template>
                <el-form
                    :model="formData"
                    label-width="240px"
                >
                    <el-form-item label="状态" prop="call_switch">
                        <el-radio-group v-model="formData.call_switch">
                            <el-radio :label="1">开启</el-radio>
                            <el-radio :label="0">关闭</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <footer-btns>
            <el-button type="primary" @click="addHandle">保存</el-button>
        </footer-btns>
    </div>
</template>

<script lang="ts" setup name="userSetup">
import {
    getpayconfig,
    setpayconfig,
} from '@/api/setting/pay'
import feedback from '@/utils/feedback'
import { getToken } from "@/utils/auth";
const activeName = ref(1)
const formData = ref({

})
const getLists = async()=>{
    const results = await getpayconfig({})
    formData.value = results
}
getLists()
// 保存
const addHandle = async() =>{

    if(formData.value.wx_apikey!='' && formData.value.wx_apikey.length != 32){
        feedback.msgError('APIV3秘钥长度必须为32位');
        return false;
    }

    await setpayconfig(formData.value)
}

// 上传文件
const uploadAction = `/adminapi/upload/localUpload`;
// const uploadAction = `https://yx.xiaojiangy.cn/adminapi/upload/localUpload`;
interface uploadTokenObj {
    token: string;
}
const uploadToken = ref<uploadTokenObj>({
    token: getToken(),
});
const successHandle1: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    formData.value.apiclient_cert = response.data.uri
}
const handleBefore = (file:any) => {
    let acceptFileType = ['pem']

    let type = file.name.split(".").slice(-1)[0].toLowerCase()
    
    console.log(file);
    
    if(!acceptFileType.includes(type)){
    feedback.msgError("上传文件失败,请上传正确的文件格式")
    return false
    }
    
    return true;

}
const zfbhandleBefore = (file:any) => {
    let acceptFileType = ['crt']

    let type = file.name.split(".").slice(-1)[0].toLowerCase()
    
    console.log(file);
    
    if(!acceptFileType.includes(type)){
    feedback.msgError("上传文件失败,请上传正确的文件格式")
    return false
    }
    return true;
}
const successHandle2: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    formData.value.apiclient_key= response.data.uri
}
const successHandle3: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    console.log("123")
    formData.value.ali_public_key= response.data.uri
}
const successHandle4: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    formData.value.alirootcert= response.data.uri
}
const successHandle5: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    formData.value.ali_pubkeycert= response.data.uri
}
</script>

<style lang="scss" scoped></style>
